<template>
    <div class="body" >
      <div style="width: 100%;display: flex;flex-direction: row;">
        <div style="width: 72%;height: 100%;display: flex;flex-direction: column;">
          <div class="set_row_div" >
            <el-card v-for="(item,index) in showData" :key="index" class="box-card" shadow="hover">
              <div slot="header" class="clearfix">
                <span> <i style="color: #409EFF;font-size: 35px;" :class="item.icon" ></i> {{item.title}}</span>
              </div>
              <div class="text item">
               
                {{item.num}}
                <el-button  type="text">详情</el-button>
              </div>
            </el-card>
          </div>
          <div class="set_row_div" >
            <el-card v-for="(item,index) in showData" :key="index" class="box-card" shadow="hover">
              <div slot="header" class="clearfix">
                <span> <i style="color: #409EFF;font-size: 35px;" :class="item.icon" ></i> {{item.title}}</span>
              </div>
              <div class="text item">
               
                {{item.num}}
                <el-button  type="text">详情</el-button>
              </div>
            </el-card>
          </div>
        </div>
        <div style="width: 28%;height: auto;align-items: center;justify-content: center;display: flex;flex-direction: column;">
          <img src="../../../assets/img/QR_code.png" style="width: 60%;border-radius: 10px;padding: 1%;margin: 5% 0px 2%;box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);"/>
          <span>KK蜡笔.医疗平台欢迎使用</span>
          <span>在线预约 门诊 ,疫苗 ,挂号</span>
          <el-button  type="text">联系请扫码</el-button>
        </div>
      </div>
      <div style="width: 93%;height: auto;margin-left: 1.5%;display: flex;flex-direction: column;">
          <div style="width: 100%;background-color: #f5f7fa;text-align: left;padding: 20px 0px 20px;">
            <span style="margin: 10px;font-size: 20px;font-weight: bold;">待处理事务</span>
          </div>

          <div style="width: 100%;text-align: left;padding: 10px 0px 10px;display: flex;flex-direction: row;background-color: #fff;">
            <el-row :gutter="20" style="width: 100%;">
                <el-col :xs="24" :sm="12" :md="8" v-for="(item, index) in items" :key="index">
                  <div style="text-align: left; margin-left:2%;margin-top: 10px; background-color: #fff; border-bottom: 1px solid #ccc; display: flex; flex-direction: row; padding-bottom: 8px;">
                    <span style="flex: 1;">{{ item.label }}</span>
                    <span style="color: brown;">({{ item.count }})</span>
                  </div>
                </el-col>
            </el-row>
          </div>

        <el-row :gutter="24" >
          <el-col :span="12">
            <el-row :gutter="20" style="margin-top: 20px;">
                <el-col :span="24" style="padding: 0px;">
                  <div style="background: #f5f7fa; padding: 30px; font-weight: bold;">商品总览</div>
                </el-col>
            </el-row>
            <el-row :gutter="20" style="text-align: center;">
                <el-col :xs="12" :sm="6" :md="6" :lg="6" v-for="(item, index) in productSummary" :key="index" style="padding: 0px;">
                  <div style="padding: 10px; border: 1px solid #f0f0f0; background: #fff;">
                    <p style="color: red; font-size: 20px;">{{ item.count }}</p>
                    <p style="color: #606266;">{{ item.label }}</p>
                  </div>
                </el-col>
              </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="20" style="margin-top: 20px;">
                <el-col :span="24" style="padding: 0px;">
                  <div style="background: #f5f7fa; padding: 30px; font-weight: bold;">用户总览</div>
                </el-col>
            </el-row>
            <el-row :gutter="20" style="text-align: center;">
                <el-col :xs="12" :sm="6" :md="6" :lg="6" v-for="(item, index) in userSummary" :key="index" style="padding: 0px;">
                  <div style="padding: 10px; border: 1px solid #f0f0f0; background: #fff;">
                    <p style="color: red; font-size: 20px;">{{ item.count }}</p>
                    <p style="color: #606266;">{{ item.label }}</p>
                  </div>
                </el-col>
              </el-row>
          </el-col>
        </el-row>  
        <el-row :gutter="24" >
          
          <el-col :span="24" style="margin-top: 30px;padding: 0px;">
            <div style="background: #f5f7fa; padding: 30px; font-weight: bold;">订单统计</div>
          </el-col>
          <el-col :span="6"  style="padding: 0%;background-color: #fff;height: 100%;">
            <div v-for="(item, index) in orderStats" :key="index" style="margin-bottom: 20px;">
              <p style="font-size: 16px; margin: 0;margin-top: 20px;">{{ item.label }}</p>
              <p style="font-size: 24px; color: red; margin: 5px 0;">{{ item.value }}</p>
              <p :style="{ color: item.change > 0 ? 'green' : 'red' }">{{ item.change > 0 ? '+' : '' }}{{ item.change }}% {{ item.description }}</p>
            </div>
          </el-col>
          <el-col :span="18"  style="padding: 0%;background-color: #fff;height: 100%;">
            <el-col :span="24"  style="padding: 0%; ">
              <div style="width: 50%;height: 50px;margin-left: 50%;">
                <el-date-picker
                    v-model="dateRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    style="width: 100%;"
                  ></el-date-picker>  
              </div>
              <div id="chart" style="height: 500px; padding: 20px;width: 100%;"></div>
            </el-col>
          </el-col>
        </el-row>
        
        

        
      </div>
      
      
    </div>       
</template>
 <script>
import * as echarts from "echarts";
 
 export default {
   data() {
       return {
        dateRange: [],
        orderStats: [
        { label: "本月订单总数", value: 10000, change: 10, description: "同比上月" },
        { label: "本周订单总数", value: 1000, change: -10, description: "同比上周" },
        { label: "本月销售总额", value: 100000, change: 10, description: "同比上月" },
        { label: "本周销售总额", value: 50000, change: -10, description: "同比上周" },
      ],
        productSummary: [
        { label: "已下架", count: 100 },
        { label: "已上架", count: 400 },
        { label: "库存紧张", count: 50 },
        { label: "全部商品", count: 500 },
      ],
      userSummary: [
        { label: "今日新增", count: 100 },
        { label: "昨日新增", count: 200 },
        { label: "本月新增", count: 1000 },
        { label: "会员总数", count: 5000 },
      ],
        items: [
        { label: '待付款订单', count: 150 },
        { label: '待发货订单', count: 80 },
        { label: '已发货订单', count: 80 },
        { label: '已完成订单', count: 80 },
        { label: '新缺货登记', count: 80 },
        { label: '待处理退货订单', count: 80 },
        { label: '待确认收货订单', count: 80 },
        { label: '待处理退款申请', count: 10 },
        { label: '广告位即将到期', count: 10 },
      ],
           users: [],
           name: '',
           email: '',
           selected:[],
           showData:[
           {
              title:'今日订单总数',
              num:200,
              icon:'el-icon-coin'
            },
            {
              title:'今日销售总额',
              num:'$50000.36',
              icon:'el-icon-money'
            },
            {
              title:'昨日销售总额',
              num:'$7800.0',
              icon:'el-icon-discount'
            },
            
           ],
       };
   },
   mounted() {
      // 获取用户列表
      this.users = JSON.parse(localStorage.getItem('loginStorage'));
      console.log(this.users)
      if(this.users.username!=null){
        this.initChart();
      }
      
   },
   methods: {
      exitLogin(){
        localStorage.clear();
        this.$router.replace(
            {name:'loginPager'}
          )
      },
      initChart() {
        const chartDom = document.getElementById("chart");
        const myChart = echarts.init(chartDom);

        const option = {
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: ["订单1总数","订单2总数", "销售总额"],
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: ["11-02", "11-03", "11-04", "11-05", "11-06", "11-07", "11-08"],
          },
          yAxis: [
            {
              type: "value",
              name: "订单总数",
              position: "left",
            },
            {
              type: "value",
              name: "销售总额",
              position: "right",
            },
          ],
          series: [
          {
              name: "订单1总数",
              type: "line",
              smooth: true,
              areaStyle: {},
              data: [20, 40, 60, 80, 40, 20, 60],
            },
            {
              name: "订单2总数",
              type: "line",
              smooth: true,
              areaStyle: {},
              data: [23, 46, 61, 20, 45, 10, 20],
            },
            {
              name: "销售总额",
              type: "line",
              smooth: true,
              yAxisIndex: 1,
              areaStyle: {},
              data: [20, 40, 60, 78, 40, 20, 102],
            },
          ],
        };
        console.log('asdfddddddddddddddddddddddddddddddddddd')
        myChart.setOption(option);
    },
   },
 };
 </script>


  <style scoped>
  .body{
    width:100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background-color: #fff;
  }
  .text {
    font-size: 24px;
  }

  .item {
    margin-bottom: 18px;
  }
  .clearfix:after {
    clear: both;
  }
  .clearfix span{
    clear: both;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .box-card {
    width: 33%;
    margin: 2%;
  }
  .set_row_div{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    /* justify-content: center; */
  }
  </style>